<template>
  <el-button class="btuuu" type="primary" @click="dialogFormVisible = true">+ 新增员工</el-button>
  <el-dialog v-model="dialogFormVisible" title="新增员工信息" width="500">
    <el-form :model="form">
      <el-form-item label="员工名字" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="账号" :label-width="formLabelWidth">
        <el-input v-model="form.empName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.empPassword" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-table
      :data="tableData"
      ref="multipleTable"
      style="width: 100%"
  >
    <el-table-column property="name" label="员工名字" width="140"/>
    <el-table-column property="empName" label="员工账号" width="140"/>
    <el-table-column property="empPassword" label="密码" width="160" :show-overflow-tooltip="true"/>
    <el-table-column property="updatedAt" label="最后操作时间" width="200"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="openEditDialog(scope.$index, scope.row)">
          编辑
        </el-button>

        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      v-model="dialogFormVisible2"
      title="编辑商品信息"
      width="500"
  >
    <el-form :model="editform" ref="editForm">
      <el-form-item label="员工姓名" :label-width="formLabelWidth">
        <el-input v-model="editform.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="账号" :label-width="formLabelWidth">
        <el-input v-model="editform.empName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="editform.empPassword" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import axios from 'axios';
import {ElMessage} from "element-plus";
// import {c} from "vite/dist/node/types.d-aGj9QkWt";
const tableData = ref([]);
const multipleTable = ref(null);
const fetchEmpList = async () => {
  try {
    const res = await axios.get('/emplist');
    tableData.value = res.data.data;
  } catch (e) {
    console.error('Failed to fetch employee list:', e);
  }
};
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const form = reactive({
  name: '',
  empName: '',
  empPassword: '',
});
const handleAdd = async () => {
  try {
    const res = await axios.post('/emplist', form);
    dialogFormVisible.value = false; // 关闭对话框
    ElMessage({message: '添加成功！', type: 'success',})
    fetchEmpList();
  } catch (e) {
    ElMessage({message: '添加失败！', type: 'warning',})
    console.error(e);
  }
}
const dialogFormVisible2 = ref(false);
const editform = ref({
  name: '',
  empName: '',
  empPassword: '',
});
const openEditDialog = async (index, row) => {
  try {
    const res = await axios.get(`/emplist/${row.empId}`)
    editform.value = res.data.data;
    dialogFormVisible2.value = true; // 显式打开编辑对话框
  } catch (e) {
    console.error(e);
  }

};
const handleEdit = async () => {
  try {
    const res = await axios.put('/emplist',editform.value)
    console.log(editform)
    console.log(res.data)
    dialogFormVisible2.value = false; // 关闭对话框
    ElMessage({message: '修改成功！', type: 'success',})
    fetchEmpList();
  }catch (e){
    ElMessage({message: '修改失败！', type: 'warning',})
    console.error(e);

  }
}
const handleDelete = async (index,row) => {
  try {
    const res = await axios.delete(`/emplist/${row.empId}`)
    console.log(res.data)
    ElMessage({message: '删除成功！', type: 'success',})
    fetchEmpList();
  }catch (e){
    ElMessage({message: '删除失败！', type: 'warning',})
    console.error(e);
  }
};

onMounted(() => {
  fetchEmpList();
});

</script>